@import 'variables'
@import 'mixins'

.styler
  opacity: 0.95
  -webkit-font-smoothing: initial
  color: styler-font-color
  background-color: styler-bg-color
  width: 320px
  margin-top: 5px
  border: none

  ul.list-inline li:first-child
    padding-left: 0
  ul.list-inline li:last-child
    padding-right: 0
  ul.list-inline > li
    padding-left: 3px
    padding-right: 3px

  ul
    padding: 0

  arrow-size = 6px
  > .arrow,
  > .arrow:after
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  > .arrow
    top: -(arrow-size);
    left: 20px;
    margin-left: -(arrow-size);
    border-width: arrow-size;
    border-top-width: 0;
    border-bottom-color: styler-bg-color

  > .arrow:after
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: styler-bg-color
    border-width: 10px;

  .sections > li
    display: list-item
    line-height: 1.3em
    padding: 10px 14px 11px
    border-bottom: 1px solid styler-divider-color
    &.list-inline
      margin-left: 0
    &.attributes
      padding-bottom: 9px
    a
      color: styler-font-color
    .dropdown-menu > li > a
      color: styler-bg-color
      &:hover
        color: #fff
    .dropdown-toggle
      font-weight: bold
    &:last-child
      border-bottom: none
    i
      margin-top: -2px
      vertical-align: middle
      font-size: 18px
      display: inline-block
      width: 29px
    &.colors, &.arrow-widths
      a
        position: relative
        display: inline-block
        background-color: #FFF
        line-height: 0
        overflow: hidden
        opacity: 0.5
        padding: 0
        &:hover, &.active
          opacity: 1
    &.colors, &.node-sizes
      a
        border-radius: 50%
    &.node-sizes
      a
        position: relative
        display: inline-block
        border: 2px solid #fff
        background-color: transparent
        line-height: 0
        overflow: hidden
        opacity: 0.5
        padding: 0
        &:hover, &.active
          opacity: 1
          background-color: #fff
    &.colors
      a
        width: 36px
        height: 36px
        border: 3px solid styler-bg-color
        &:hover, &.active
          width: 36px
          height: 36px
          border: none
    &.arrow-widths
      a
        height: 30px

